<!doctype html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
        <meta name="renderer" content="webkit" />
	    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width,height=device-height">
        <title>联系方式</title>
        <script src="./js/common/vue.js"></script>
        <script src="js/common/axios.min.js"></script>
        <script src="./js/common/vue-resource.js"></script>
        <link href="favicon.ico" rel="shortcut icon">
        <link rel="stylesheet" href="css/common/swiper.css">
        <link rel="stylesheet" href="css/common/base.css">
        <link rel="stylesheet" href="css/common/animation.css">
        <link rel="stylesheet" href="css/common/media.css">
        <link rel="stylesheet" href="css/common/main.css">
        <link rel="stylesheet" href="css/contact.css">
    </head>
    <body>
        <div id="contn">
            <v-header></v-header>
            <v-main></v-main>
            <v-footer></v-footer>
        </div>

        <template id="vMain">
            <main>
                <div class="heading ready">
                    <img :src="nav.length?nav[curr].imagePath:''" class="obj-c">
                    <div class="ttl fill flex flex-justify-content">
                        <p class="eng delay-1"></p>
                        <p class="chn delay-2">{{nav.length?nav[curr].name:''}}</p>
                    </div>
                </div>
                <nav class="flex flex-justify-content">
                    <a href="javascript:;" @click="funcScrl(i)" v-for="(item,i) in showcase" :class='!i?"active":""'>{{item.name}}</a>
                </nav>
                <div id="contact" class="showcase">
                    <div class="fluid flex">
                        <div class="lft ready">
                            <div class="ttl" v-if="showcase.length">
                                <p class="chn delay-1">{{showcase[0].name}}</p>
                                <p class="eng delay-2">{{showcase[0].enName}}</p>
                            </div>
                            <div class="txt">
                                <p><img src="img/contact/phone.png">{{webBasicInf.phone}}</p>
                                <p><img src="img/contact/loc.png">{{webBasicInf.location}}</p>
                                <p><img src="img/contact/mail.png">{{webBasicInf.email}}</p>
                            </div>
                        </div>
                        <p class="map"><iframe src="map.html" frameborder="0"></iframe></p>
                    </div>
                </div>
                <div id="suggest" class="showcase">
                    <div class="fluid ready">
                        <div class="ttl" v-if="showcase.length">
                            <p class="chn delay-1">{{showcase[1].name}}</p>
                            <p class="eng delay-2">{{showcase[1].enName}}</p>
                        </div>
                        <div class="form flex">
                            <div class="form-group">
                                <p class="label">姓名:</p>
                                <input type="text" id="name">
                            </div>
                            <div class="form-group">
                                <p class="label">联系方式:</p>
                                <input type="text" id="ctct">
                            </div>
                            <div class="form-group">
                                <p class="label">详细内容:</p>
                                <textarea id="msg"></textarea>
                            </div>
                        </div>
                        <p class="submit cursor" @click="submit">提交</p>
                        <p class="subTip hvc">请填写所有输入框</p>
                    </div>
                </div>
                <div id="cooperate" class="showcase">
                    <p class="bg fill"><img v-if="showcase.length" class="obj-c" :src="showcase[2].imagePath"></p>
                    <div class="txt ready">
                        <p>加盟热线</p>
                        <p>{{webBasicInf.phone}}</p>
                        <span class="blocks fill">
                            <i></i>
                            <i></i>
                            <i></i>
                            <i></i>
                        </span>
                    </div>
                </div>
            </main>
        </template>
        
        
        <script src="js/common/swiper.js"></script>
        <script src="js/common/jquery.js"></script>
        <script src="js/common/dataUrl.js"></script>
        <script src="js/common/header.js"></script>
        <script src="js/common/footer.js"></script>
        <script>
            var scrollInt = null;
            var contn = new Vue({
                el:'#contn',
                data:{
                    
                },
                methods:{

                },
                components:{
                    vMain:{
                        template: '#vMain',
                        data:function(){
                            return{
                                curr:'',
                                nav:[],
                                showcase:[],
                                webBasicInf:{},
                                obj:{}
                            }
                        },
                        created:function(){
                            this.writingWeb();
                        },
                        mounted:function(){
                            ifMounted = true;
                        },
                        methods:{
                            submit:function(){
                                for(var c = 0;c < $('#suggest .form .label + *').length;c++){
                                    var val = $('#suggest .form .label + *').eq(c).val().replace(/\s+/g, "");
                                    if(!val.length){
                                        showSubTip();
                                        return false;
                                    }
                                }
                                this.obj.name = $('#suggest .form #name').val();
                                this.obj.phone = $('#suggest .form #ctct').val();
                                this.obj.details = $('#suggest .form #msg').val();
                                $.ajax({
                                    type: 'POST',
                                    headers: {
                                        'Authorization':headers 
                                    },
                                    url: 'http://www.ascbra.com/cms/api/addContact',
                                    data: JSON.stringify(this.obj),
                                    dataType: "json",
                                    contentType: 'application/json',
                                    success: function (data) {
                                        console.log(data);    
                                        $('#suggest .form .label + *').val('');
                                        showSubTip('提交成功!');
                                    }
                                })
                            },
                            funcScrl:function(ind){
								$('main nav a').removeClass('active');
								$('main nav a').eq(ind).addClass('active');
								clearInterval(scrollInt);
                                var final = $('.showcase').eq(ind)[0].getBoundingClientRect().top;
                                final = parseInt(final);
								scrollSec(final);
								function scrollSec(val){
									scrollInt = setInterval(function(){
										var now = document.documentElement.scrollTop || document.body.scrollTop;
										now = parseInt(now);
										if(now > val){
											var v = Math.ceil((now - val) / 15);
											now -= v;
										}else if(now < val){
											var v = Math.ceil((val - now) / 15);
											now += v;
										}
                                        document.documentElement.scrollTop = document.body.scrollTop = now;
										if(now == val || now + window.innerHeight >= document.documentElement.scrollHeight){
											clearInterval(scrollInt);
										}
									},10)
								}
							},
                            writingWeb:function(){
                                //获取导航栏
                                axios.get(dataUrl + 'api/getNavbar',{
                                    headers:{
                                        Authorization: headers
                                    }
                                })
                                .then((res) => {
                                    //console.log(res.data.data);
                                    this.nav = res.data.data;
                                    var nowHref = window.location.href;
                                    for(var c = 1;c < res.data.data.length;c++){
                                        if(nowHref.indexOf(res.data.data[c].visitUrl) >= 0 && res.data.data[c].visitUrl.length){
                                            this.curr = c;
                                            console.log(c);
                                            //获取二级栏目详情
                                            axios.post(dataUrl + 'api/getNavbarDetails',{id:res.data.data[c].id},{
                                                headers:{
                                                    Authorization: headers
                                                }
                                            })
                                            .then((res) => {
                                                console.log(res.data.data);
                                                this.showcase = res.data.data;
                                            })
                                        }
                                    }
                                    var This = this;
                                    setTimeout(function(){
                                        var enAry = This.nav[This.curr].enName.split(' ');
                                        for(var t = 0;t < enAry.length;t++){
                                            var txt = enAry[t];
                                            var fstLtr = txt[0];
                                            txt = txt.substring(1);
                                            console.log(txt);
                                            var em = '<em>' + fstLtr + '</em>' + txt;
                                            var span = $('<span></span>').html(em);
                                            if(t){
                                                $('.heading .ttl .eng').append(' ');
                                            }
                                            $('.heading .ttl .eng').append(span);
                                        }
                                    },10)
                                });

                                //获取网站基本信息
                                axios.get(dataUrl + 'api/getWebsite',{
                                    headers:{
                                    Authorization: headers
                                    }
                                })
                                .then((res) => {
                                    console.log(res.data.data);
                                    this.webBasicInf = res.data.data;
                                })
                            }
                        }
                    }
                }
            })
        </script>
        <script src="js/common/common.js"></script>
        <script src="js/common/animation.js"></script>
        <script src="js/index.js"></script>
    </body>
</html>
